Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.07.2014, 18:37
Новичок на форуме
Отправить личное сообщение для danilchen Посмотреть профиль Найти все сообщения от danilchen
 
Регистрация: 29.07.2014
Сообщений: 2

Бесконечная прокрутка на Jquery
Друзья, подскажите пожалуйста как быть.

Есть код бесконечной прокрутки


Файл ajax.php

<?php
mysql_connect('serv', 'baza', 'passw') or die();
mysql_select_db('bd');
 
$offset = is_numeric($_POST['offset']) ? $_POST['offset'] : die();
$postnumbers = is_numeric($_POST['number']) ? $_POST['number'] : die();
 
 
$run = mysql_query("SELECT * FROM table ORDER BY id DESC LIMIT ".$postnumbers." OFFSET ".$offset);
 
 
while($row = mysql_fetch_array($run)) {
    
    
   $array[] = $row['r1'];
   $ido[]=$row['id'];
   
   
echo '<li><a href="obrab.php?nomer='.$numpass.'&id='.$row['id'].'" target=_blank><img src="'.$row['r9'].'" alt="" height="190px" width="190px"/></a></li>';
 
}
 
?>



Файл Javascript.js

(function($) {
 
  
 
 
 
 
    $.fn.scrollPagination = function(options) {
        
        var settings = { 
            
                        nop     : 10, // Количество запрашиваемых из БД записей
            offset  : 0, // Начальное смещение в количестве запрашиваемых данных
            error   : 'Записей больше нет!', // оповещение при отсутствии данных в БД
            delay   : 500, // Задержка перед загрузкой данных
            scroll  : true, // Если true то записи будут подгружаться при прокрутке странице, иначе только при на
                
}
        
        // Включение опции для плагина
        if(options) {
            $.extend(settings, options);
        }
        
        return this.each(function() {       
            
            $this = $(this);
            $settings = settings;
            var offset = $settings.offset;
            var busy = false; // переменная для обозначения происходящего процесса
            
            // Текст кнопки, на основе параметров
            if($settings.scroll == true) $initmessage = 'Показать больше';
            else $initmessage = 'Кликни';
            
            $this.append('<div class="content"></div><div class="loading-bar">'+$initmessage+'</div>');
            
            // Функция AJAX запроса
            function getData() {
                
                // Формируется POST запрос к ajax.php
                $.post('ajaxm.php', {
                        
                    action        : 'scrollpagination',
                    number        : $settings.nop,
                    offset        : offset,
                    table: 'Таблица',
                }, function(data) {
                        
                    // Информируем пользователя
                    $this.find('.loading-bar').html($initmessage);
                    
                    // Если возвращенные данные пусты то сообщаем об этом   
                    if(data == "") { 
                        $this.find('.loading-bar').html($settings.error);   
                    
 
 
 
                                         }
                    else {
                        
                        // Смещение увеличивается
                        offset = offset+$settings.nop; 
                            
                        // Добавление полученных данных в DIV content
                        $this.find('.content').append(data);
                        
                        // Процесс завершен 
                        busy = false;
                    }   
                        
                });
                    
            }   
            
            getData(); // Запуск функции загрузки данных в первый раз
            
                     
                   
                      function al(){ alert('Добрый день');}
                       al();
 
 
 
 
            // Если прокрутка включена
            if($settings.scroll == true) {
                // .. и пользователь прокручивает страницу
                $(window).scroll(function() {
                    
                    // Проверяем пользователя, находится ли он в нижней части страницы
                    if($(window).scrollTop() + $(window).height() > $this.height() && !busy) {
                        
                        // Идет процесс
                        busy = true;
                        
                        // Сообщить пользователю что идет загрузка данных
                        $this.find('.loading-bar').html('Загрузка данных');
                        
                        // Запустить функцию для выборки данных с установленной задержкой
                        // Это полезно, если у вас есть контент в футере
                        setTimeout(function() {
                            
                            getData();
                            
                        }, $settings.delay);
                            
                    }   
                });
            }
            
            // кроме того конент может быть загружен нажатием на кнопку
            $this.find('.loading-bar').click(function() {
            
                if(busy == false) {
                    busy = true;
                    getData();
                }
            
            });
            
        });
    
 
 
 
}
 
}
 
)(jQuery);





файл index.php

<!DOCTYPE HTML>
<html>
<head>
 
 
 
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="header.css"/>
 
 
<script src="jquery.js"> </script>
<script src="javascript.js"> </script>
 
 
<style type="text/css">
 
</style>
<script>
 
$(document).ready(function() {
 
    $('#content').scrollPagination({
 
        nop     : 10, // Количество запрашиваемых из БД записей
        offset  : 0, // Начальное смещение в количестве запрашиваемых данных
        error   : 'Записей больше нет!', // оповещение при отсутствии данных в БД
        delay   : 500, // Задержка перед загрузкой данных
        scroll  : true // Если true то записи будут подгружаться при прокрутке странице, иначе только при нажатии на кнопку 
        
    });
    
});
 
</script>
 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
 
<div id="content">
 
 
</div>
 
</body>
</html>


В принципе скрипт работает нормально, но задача сделать так, что бы появилась возможность менять таблицы выгрузки данных.

А именно, на странице index.php сделать 3-4 ссылки, нажимая на которые меняется значение table в файле ajax.php вот строка $run = mysql_query("SELECT * FROM table ORDER BY id DESC LIMIT ".$postnumbers." OFFSET ".$offset);.

Например есть 4 таблицы с данными машина, мотоцикл, ведро, нос. при первом запуске скрипт выгружает данные из таблицы машина и работает с ней. После нажатия на остальные ссылки, соответственно переключается на работу с ними.


Буду очень благодарен за помощь.
Ответить с цитированием
  #2 (permalink)  
Старый 01.08.2014, 07:36
Новичок на форуме
Отправить личное сообщение для danilchen Посмотреть профиль Найти все сообщения от danilchen
 
Регистрация: 29.07.2014
Сообщений: 2

Блин ну что то смотрю спецы молчат. Ребят очень нужно, может кто заработать хочет, я заплачу.
Ответить с цитированием
  #3 (permalink)  
Старый 01.08.2014, 08:50
Профессор
Отправить личное сообщение для WorM32 Посмотреть профиль Найти все сообщения от WorM32
 
Регистрация: 11.02.2014
Сообщений: 303

Слишком раздутый пост потому что. Нет времени вглядываться в каждую строчку.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Бесконечная прокрутка содержимого списка(ul>li) XuLLlHuK jQuery 2 22.07.2014 13:59
Карусель. Бесконечная прокрутка. raffx Events/DOM/Window 2 17.07.2014 16:24
Бесконечная прокрутка Simones Events/DOM/Window 6 08.12.2013 01:07
хочу инвайт на хабр macdack Оффтопик 45 28.07.2013 23:18
Вопрос поддержки старых методов jQuery antonM jQuery 1 04.10.2012 00:08